.w-common-slide-public {
  animation: -w-common-slide-show 0.158s 1;
}

.w-common-slide-close-public {
  animation: -w-common-slide-close 0.158s 1;
}

.w-notify-bottom {
  animation: -w-notify-from-bottom 0.158s 1;
}

.w-notify-top {
  animation: -w-notify-from-top 0.158s 1;
}

.w-prompt-middle {
  animation: -w-prompt-show-middle 0.1s 1;
}

.w-prompt-bottom {
  animation: -w-prompt-show-bottom 0.1s 1;
}

.w-prompt-top {
  animation: -w-prompt-show-top 0.1s 1;
}

/* close dom animation */
.m-w-common-slide-right {
  animation: -w-hide-common-slide-right 0.173s 1;
}

.m-w-common-slide-right-close {
  animation: -w-hide-common-slide-right-close 0.173s 1;
}

.m-w-prompt-top {
  animation: -w-prompt-top-close 0.173s 1;
}

.m-w-prompt-middle {
  animation: -w-prompt-middle-close 0.173s 1;
}

@keyframes -w-common-slide-show {
  0% {width: 15%;}
  25% {width: 25%;}
  55% {width: 35%;}
  75% {width: 50%;}
  90% {width: 70%;}
  100% {width: 79%;}
}

@keyframes -w-common-slide-close {
  0% {width: 2%;}
  25% {width: 5%;}
  55% {width: 10%;}
  75% {width: 12%;}
  90% {width: 18%;}
  100% {width: 20%;}
}

@keyframes -w-notify-from-top {
  0% {top: 1%;};
  50% {top: 2.5%};
  100% {top:5%;};
}

@keyframes -w-notify-from-bottom {
  0% {transform: translateX(90%) translateY(90%);};
  50% {transform: translateX(50%) translateY(50%);};
  100% {transform: translateX(0%) translateY(0%);};
}

@keyframes -w-prompt-show-middle {
  0% { height: 8%; min-height: 8%; }
  50% { height: 15%; min-height: 15%; }
  100% { height: 20%; min-height: 20%; }
}

@keyframes -w-prompt-show-bottom {
  0% { bottom: -10%; overflow-y: hidden;}
  50% { bottom: 1%; overflow-y: hidden;}
  100% { bottom: 5%; overflow-y: auto;}
}

@keyframes -w-prompt-show-top {
  0% { top: 0%; min-height: 20%; max-height: 70%;overflow-y: hidden;}
  50% { top: 3%; min-height: 20%; max-height: 72%;overflow-y: hidden;}
  100% { top: 5%; min-height: 20%; max-height: 75%;overflow-y: auto;}
}

/* close animation */

@keyframes -w-hide-common-slide-right {
  0% {width: 75%;}
  15% {width: 65%;}
  25% {width: 50%;}
  35% {width: 35%;}
  45% {width: 15%;}
  55% {width: 5%;}
  65% {width: 0%;}
  75% {width: 0%;}
  100% {width: 0%;}
}

@keyframes -w-hide-common-slide-right-close {
  0% {width: 20%;}
  15% {width: 18%;}
  25% {width: 15%;}
  35% {width: 10%;}
  45% {width: 5%;}
  55% {width: 0%;}
  65% {width: 0%;}
  75% {width: 0%;}
  100% {width: 0%;}
}

@keyframes -w-prompt-middle-close {
  0% { max-height: 65%; overflow-y: hidden;}
  20% { max-height: 35%; overflow-y: hidden;}
  35% { max-height: 20%; overflow-y: hidden;}
  50% { min-height: 0%;max-height: 15%;height: 15%; overflow-y: hidden;}
  65% { min-height: 0%;max-height: 10%;height: 10%; overflow-y: hidden;}
  80% { min-height: 0%;max-height: 2%;height: 2%; overflow-y: hidden;}
  90% { min-height: 0%;max-height: 0%;height: 0%; overflow-y: hidden;}
  100% { min-height: 0%;max-height: 0%;height: 0%; overflow-y: hidden;}
}

@keyframes -w-prompt-top-close {
  0% { top: 5%; max-height: 65%; overflow-y: hidden;}
  20% { top: 3%; max-height: 35%; overflow-y: hidden;}
  35% { top: 0%; max-height: 20%; overflow-y: hidden;}
  50% { top: 0%; min-height: 0%;max-height: 15%; height:15%; overflow-y: hidden;}
  75% { top: 0%; min-height: 0%;max-height: 10%;height: 10%; overflow-y: hidden;}
  80% { top: 0%; min-height: 0%;max-height: 2%;height: 2%;overflow-y: hidden;}
  90% { top: 0%; min-height: 0%;max-height: 0%;height: 0%;overflow-y: hidden;}
  100% { top: 0%; min-height: 0%;max-height: 0%;height: 0%;overflow-y: hidden;}
}
